<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>订单管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/refund' }">退款订单列表</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="refund-page">
			<div class="choice-list">
				<div class="choice-item" v-for="item in searchList" :key="item.index">
					<div class="choice-title">{{item.name}}</div>
					<el-select v-if="item.type == '1'" v-model="item.ivalue" :placeholder="item.placeholder">
						<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
					</el-select>
					<el-input v-model="item.ivalue" v-if="item.type=='2'" class="rounded-input" @blur="blurClick()"
						@focus="focusClick(item)" :placeholder="item.placeholder" />
					<el-date-picker v-if="item.type=='3'" v-model="item.ivalue" type="date"
						:placeholder="item.placeholder" style="width: 160px;" :suffix-icon="CaretBottom" />
				</div>
			</div>
			<view class="choice-box">
				<div class="choice-btn">
					<el-button round :icon="RefreshRight">刷新</el-button>
				</div>
				<div class="choice-btn">
					<el-button round :icon="Search" color="#0071bb">查询</el-button>
					<el-button round :icon="RefreshLeft">重置</el-button>
					<el-button round :icon="Setting">筛选</el-button>
				</div>
			</view>
			<div class="tables">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="id" label="序号" width="50px" />
					<el-table-column prop="opentime" label="开门时间" />
					<el-table-column prop="closingtime" label="关门时间" />
					<el-table-column prop="ordercode" label="订单号" />
					<el-table-column prop="time" label="申请时间" />
					<el-table-column label="订单状态">
						<template #default="scope">
							<div class="type1" v-if="scope.row.type == '1'">
								待处理
							</div>
							<div class="type2" v-if="scope.row.type == '2'">
								退款中
							</div>
							<div class="type3" v-if="scope.row.type == '3'">
								已拒绝
							</div>
							<div class="type4" v-if="scope.row.type == '4'">
								已退款
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="设备名称" />
					<el-table-column prop="imei" label="设备IMEI号" />
					<el-table-column prop="tel" label="手机号码" />
					<el-table-column prop="inspect" label="查看">
						<template #default="scope">
							<div class="special" @click="dialogVisible = true">
								{{ scope.row.inspect }}
							</div>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
					:disabled="disabled" layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
		<el-dialog v-model="dialogVisible" width="60%" top="5vh">
			<div class="info-title">
				订单详情
			</div>
			<div class="from-title">
				订单信息
			</div>
			<el-table class="pop-table" :data="tableDatainfo" border :span-method="infoarraySpanMethod"
				style="width: 100%">
				<el-table-column prop="title" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title == '订单号'">
							{{scope.row.ordercode}}
						</div>
						<div class="cont" v-if="scope.row.title == '开门信息'">
							{{scope.row.opentime}}
						</div>
						<div class="cont" v-if="scope.row.title == '支付时间'">
							{{scope.row.paytime}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title2" />
				<el-table-column>
					<template #default="scope">
						<div v-if="scope.row.title2 == '订单状态'">
							<div v-if="scope.row.paytype == '1'" style="color: #ffaa00;font-weight: 400;">支付成功</div>
							<div v-if="scope.row.paytype == '2'" style="color: #999999;font-weight: 400;">支付失败</div>
						</div>
						<div class="cont" v-if="scope.row.title2 == '关门时间'">
							{{scope.row.closingtime}}
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="from-title">
				支付信息
			</div>
			<el-table class="pop-table" :data="tableDatapay" border :span-method="payarraySpanMethod"
				style="width: 100%">
				<el-table-column prop="title" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title == '总金额'">
							{{scope.row.amount}}
						</div>
						<div class="cont" v-if="scope.row.title == '会员金币支付'">
							{{scope.row.coinpayment}}
						</div>
						<div class="cont" v-if="scope.row.title == '实际金额支付'">
							{{scope.row.payment}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title2" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title2 == '惠家红包抵扣'">
							{{scope.row.welhome}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title3" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title3 == '乐汇红包抵扣'">
							{{scope.row.lehui}}
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="from-title">
				设备信息
			</div>
			<el-table class="pop-table" :data="tableDevice" border :span-method="infoarraySpanMethod"
				style="width: 100%">
				<el-table-column prop="title" />
				<el-table-column>
					<template #default="scope">
						<div class="cont" v-if="scope.row.title == '设备名称'">
							{{scope.row.ordercode}}
						</div>
						<div class="cont" v-if="scope.row.title == '投放地址'">
							{{scope.row.address}}
						</div>
						<div class="cont" v-if="scope.row.title == '监控回放'" style="color: #5252ff;">
							{{scope.row.monitor}}
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="title2" />
				<el-table-column>
					<template #default="scope">
						<div v-if="scope.row.title2 == '设备IEMI号'">
							<div style="color: #999999;">
								{{scope.row.iemi}}
							</div>
						</div>
						<div class="cont" v-if="scope.row.title2 == '最新同步时间'">
							{{scope.row.sync_time}}
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="from-title">
				商品信息
			</div>
			<el-table :data="goodsData" style="width: 100%">
				<el-table-column prop="img" label="商品图片">
					<template #default="scope">
						<img class="goods_img" :src="scope.row.img" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称" />
				<el-table-column prop="code" label="商品条码" />
				<el-table-column prop="num" label="商品数量" />
				<el-table-column prop="price" label="商品价格" />
				<el-table-column prop="species" label="会员金币支付" />
				<el-table-column prop="welhome" label="惠家红包抵扣" />
				<el-table-column prop="lehui" label="乐汇红包抵扣" />
				<el-table-column prop="envelope" label="赠送惠家红包" />
				<el-table-column prop="pay_num" label="实际支付" />
			</el-table>
			<div class="from-title">
				退款信息
			</div>
			<el-table :data="refundData " style="width: 100%">
				<el-table-column prop="img" label="商品图片">
					<template #default="scope">
						<img class="goods_img" :src="scope.row.img" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称" />
				<el-table-column prop="code" label="商品条码" />
				<el-table-column prop="num" label="商品数量" />
				<el-table-column prop="price" label="商品价格" />
				<el-table-column prop="reason" label="退款理由" />
				<el-table-column prop="notes" label="备注" />
				<el-table-column prop="refund_price" label="退款金额">
					<template #default="scope">
						<div>
							<div><el-input size="small" v-model="scope.row.refund_price" style="width: 50px"
									placeholder="" /></div>
							<div>注:可输入</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="isrefund" label="是否同意退款" width="120px">
					<template #default="scope">
						<div class="refund-btn">
							<el-button size="small" color="#0071bb">同意</el-button>
							<el-button size="small" color="#ff0000">拒绝</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { Search, RefreshLeft, Setting, RefreshRight, CaretBottom } from '@element-plus/icons-vue'
	import type { ComponentSize } from 'element-plus'
	// import { useRouter } from 'vue-router';
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	// const router = useRouter();
	const currentPage = ref(1);
	const pageSize = ref(1);
	const size = ref<ComponentSize>('small')
	const disabled = ref(false)
	const dialogVisible = ref(false)
	const goodsData = [
		{
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康帅傅茉莉蜜茶',
			code: '9476584786',
			num: '1',
			price: '5',
			species: '0',
			welhome: '0',
			lehui: '0',
			envelope: '0',
			pay_num: '5'
		}
	]
	const refundData = [
		{
			img: 'https://img0.baidu.com/it/u=1031069066,2207197839&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
			name: '康帅傅茉莉蜜茶',
			code: '9476584786',
			num: '1',
			price: '5',
			reason: '不要放回去了',
			notes: '备注111',
			refund_price: '5',
			isrefund: ''
		}
	]
	const tableDevice = [
		{
			title: '设备名称',
			title2: '设备IEMI号',
			iemi: '9898949493894',
			ordercode: '伯克材料8745874',
			paytype: '1',
		},
		{
			title: '投放地址',
			title2: '最新同步时间',
			sync_time: '2000-12-12',
			address: '常熟市新颜路22号',
		},
		{
			title: '监控回放',
			monitor: '查看监控',
		},
	]
	const tableDatainfo = [
		{
			title: '订单号',
			title2: '订单状态',
			ordercode: '123123123',
			paytype: '1',
		},
		{
			title: '开门信息',
			title2: '关门时间',
			closingtime: '2000-12-12',
			opentime: '2000-12-12',
		},
		{
			title: '支付时间',
			paytime: '2000-12-12',
		},
	]
	const tableDatapay = [
		{
			title: '总金额',
			amount: '5',
		},
		{
			title: '会员金币支付',
			coinpayment: '0',
			title2: '惠家红包抵扣',
			welhome: '0',
			title3: '乐汇红包抵扣',
			lehui: '0',
		},
		{
			title: '实际金额支付',
			payment: '5'
		},
	]
	const tableData = [
		{
			id: '1',
			opentime: '2024-05-01——12:22:20',
			closingtime: '2024-05-01——12:22:21',
			ordercode: '123',
			time: '2024-05-01——12:22:21',
			type: '1',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tel: '19254966000',
			inspect: '详情',
		},
		{
			id: '2',
			opentime: '2024-05-01——12:22:20',
			closingtime: '2024-05-01——12:22:21',
			ordercode: '123',
			time: '2024-05-01——12:22:21',
			type: '2',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tel: '19254966000',
			inspect: '详情',
		},
		{
			id: '3',
			opentime: '2024-05-01——12:22:20',
			closingtime: '2024-05-01——12:22:21',
			ordercode: '123',
			time: '2024-05-01——12:22:21',
			type: '3',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tel: '19254966000',
			inspect: '详情',
		},
		{
			id: '4',
			opentime: '2024-05-01——12:22:20',
			closingtime: '2024-05-01——12:22:21',
			ordercode: '123',
			time: '2024-05-01——12:22:21',
			type: '4',
			date: '2024-05-20',
			name: '伯克材料3668649',
			imei: '8698254043668649',
			tel: '19254966000',
			inspect: '详情',
		}
	]
	const searchList = ref<searchList[]>([
		{
			name: '开门时间',
			index: '1',
			placeholder: '请选择开门时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '关门时间',
			index: '2',
			placeholder: '请选择关门时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '订单号',
			index: '3',
			placeholder: '请输入订单号',
			type: '2',
			ivalue: ''
		},
		{
			name: '申请时间',
			index: '4',
			placeholder: '请选择退款申请时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '处理时间',
			index: '4',
			placeholder: '请选择退款处理时间',
			type: '3',
			ivalue: ''
		},
		{
			name: '订单状态',
			index: '5',
			placeholder: '请选择订单状态',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备名称',
			index: '6',
			placeholder: '请选择设备',
			type: '1',
			ivalue: ''
		},
		{
			name: '设备编号',
			index: '7',
			placeholder: '请输入设备编号',
			type: '2',
			ivalue: ''
		},
		{
			name: '手机号码',
			index: '7',
			placeholder: '请输入用户手机号码',
			type: '2',
			ivalue: ''
		},

	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const infoarraySpanMethod = ({ row, column, rowIndex, columnIndex } : { row : any, column : any, rowIndex : number, columnIndex : number }) => {
		if (columnIndex === 1) {
			if (rowIndex == 2) {
				return {
					rowspan: 1,
					colspan: 3
				};
			}
		}
	};
	const payarraySpanMethod = ({ row, column, rowIndex, columnIndex } : { row : any, column : any, rowIndex : number, columnIndex : number }) => {
		if (columnIndex === 1) {
			if (rowIndex == 2) {
				return {
					rowspan: 1,
					colspan: 5
				};
			}
		}
		if (columnIndex === 1) {
			if (rowIndex == 0) {
				return {
					rowspan: 1,
					colspan: 5
				};
			}
		}
	};
</script>
<style lang="scss">
	.pop-table .el-table__header th {
		display: none !important;
	}

	.pop-table .el-table__body td div {
		color: #333;
		font-weight: 600;
	}
</style>
<style lang="scss" scoped>
	.goods_img {
		width: 30px;
		height: 50px;
	}
	.refund-btn {
		display: flex;
	}

	.info-title {
		font-size: 14px;
		margin-top: -20px;
		font-weight: bold;
		color: #000;
	}

	.from-title {
		font-size: 14px;
		padding: 10px;
		color: #000;
		font-weight: bold;
	}

	.pop-table {
		.cont {
			color: #666;
			font-weight: 400;
		}
	}

	.refund-page {
		background-color: #fff;
		margin-top: 20px;
		padding: 20px 10px 0px 10px;

		.choice-list {
			display: flex;
			flex-wrap: wrap;

			.choice-item {
				width: 14.2%;
				display: flex;
				align-items: center;
				margin-bottom: 15px;

				.el-select {
					width: 160px;
				}

				.choice-title {
					font-size: 12px;
					width: 80px;
					text-align: center;
				}

				.rounded-input {
					width: 160px;
				}
			}

		}

		.choice-box {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.choice-btn {
				display: flex;
			}
		}

		.tables {
			margin-top: 10px;

			.type1 {
				color: #ff0000;
			}

			.type2 {
				color: #71abd8;
			}

			.type3 {
				color: #999999;
			}

			.type4 {
				color: #ffaa00;
			}

			.special {
				color: #71abd8;
				cursor: pointer;
			}
		}

		.page_number {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 10px 0;
		}
	}
</style>